<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        * {
            padding: 0;
            margin: 0;
        }

        .outer {
            display: flex;
            width: 600px;
            margin: 20px auto;
        }

        ul {
            display: flex;
            position: relative;
        }

        li {
            list-style: none;
           
        }
            .content {
            position: absolute;
            top: 50px;
            left: 0;
            width: 308px;
            margin-left: 10px;
            line-height: 26px;
            color: #0ad6f1;
        }
        p {
            color: #000;
        }

        .title {
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="outer">
    <div class="title">点击右侧就能打分</div>
        <ul>
             <li>☆</li>
             <li>☆</li>
             <li>☆</li>
             <li>☆</li>
             <li>☆</li>
             <div class="content">
    <span class="one">1</span>分 <span class="two">很不满意</span>
    <p>差得太离谱，与卖家描述的严重不符，非常不满</p>
         </div>
        </ul>
      </div>
    <script>
        var msg = [
            "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
            "不满意|部分有破损，与卖家描述的不符，不满意",
            "一般|质量一般，没有卖家描述的那么好",
            "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
            "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
        ];
        var twoMsg = [];
        var pMsg = [];
        for (var i = 0; i <= msg.length - 1; i++) {
            twoMsg.push(msg[i].split('|')[0]);
            pMsg.push(msg[i].split('|')[1]);
        }

        var lis = document.querySelectorAll('li');
        var Index = 0;

        var one = document.querySelector('.one');
        var two = document.querySelector('.two');
        var p = document.querySelector('p');

        var content = document.querySelector('.content');
        for (var i = 0; i <= lis.length - 1; i++) {
            var li = lis[i];
            li.index = i;
            li.onmouseenter = function () {
                for (var k = 0; k <= Index; k++) {
                    lis[k].style.color = '';
                }
                for (var j = 0; j <= this.index; j++) {
                    lis[j].style.color = '#0ad6f1';
                }
                Index = this.index;

                content.style.left = this.offsetLeft + 'px';

                one.innerHTML = this.index + 1;
                two.innerHTML = twoMsg[this.index];
                p.innerHTML = pMsg[this.index];


                content.style.top = '';
                p.style.display = '';
                content.style.width = '';
                content.style.lineHeight = '';

            }
            li.onclick = function () {
                content.style.top = '0';
                content.style.left = lis[lis.length - 1].offsetLeft + lis[lis.length - 1].offsetWidth + 'px';
                p.style.display = 'inline-block';
                content.style.width = '500px';
                content.style.lineHeight = '50px';
            }
        }
    </script>
</body>

</html>